import { Fragment, useMemo } from "react";
import { Button, Divider, Tooltip, TooltipProps } from "antd";
import { isBoolean, isFunction, isString } from "@/utils/is";
import type { ActionItem } from "@/components/Table";
import { useTranslation } from "react-i18next";
import { ActionPropsDefault, ActionPropsType } from "../props";
import { PopConfirmButton } from "@/components/Button";
import Icon from "@/components/Icon";
import { Dropdown } from "@/components/Dropdown";
import "../style/TableAction.less";

const TableAction = (props: ActionPropsType) => {
	// fix React18 "defaultProps" problem
	props = Object.assign({}, { ...ActionPropsDefault, ...props });

	const { t } = useTranslation();

	const prefixCls = "basic-table-action";

	const isIfShow = (action: ActionItem): boolean => {
		const ifShow = action.ifShow;

		let isIfShow = true;

		if (isBoolean(ifShow)) isIfShow = ifShow;

		if (isFunction(ifShow)) isIfShow = ifShow(action);

		return isIfShow;
	};

	function getTooltip(data: string | TooltipProps): TooltipProps {
		return {
			// getPopupContainer: () => unref((table as any)?.wrapRef) ?? document.body,
			placement: "bottom",
			...(isString(data) ? { title: data } : data)
		};
	}

	const getActions = useMemo(() => {
		return (props.actions || [])
			.filter((action: ActionItem) => isIfShow(action))
			.map((action: ActionItem) => {
				const { popConfirm } = action;
				return {
					// getPopupContainer: () => unref((table as any)?.wrapRef) ?? document.body,
					type: "link",
					...action,
					...(popConfirm || {}),
					onConfirm: popConfirm?.confirm,
					onCancel: popConfirm?.cancel,
					enable: !!popConfirm
				};
			});
	}, [props.actions]);

	const getDropdownList = useMemo((): any[] => {
		const list = (props.dropDownActions || []).filter((action: ActionItem) => isIfShow(action));

		return list.map((action: ActionItem, index: number) => {
			const { label, popConfirm } = action;
			return {
				...action,
				popConfirm: popConfirm ? { ...popConfirm, placement: "left" } : undefined,
				...(popConfirm || {}),
				onConfirm: popConfirm?.confirm,
				onCancel: popConfirm?.cancel,
				text: label,
				divider: index < list.length - 1 ? props.divider : false
			};
		});
	}, [props.dropDownActions, props.divider]);

	return (
		<div className={[prefixCls, "center"].join(" ")}>
			{getActions.map((action: ActionItem, index: number) => {
				return (
					<Fragment key={`${index}-${action.label}`}>
						{action.tooltip ? (
							<Tooltip {...getTooltip(action.tooltip)}>
								<PopConfirmButton {...action}>
									{action.icon && <Icon icon={action.icon} className={action.label ? "mr-1" : ""} />}
									{action.label}
								</PopConfirmButton>
							</Tooltip>
						) : (
							<PopConfirmButton {...action}>
								{action.icon && <Icon icon={action.icon} className={action.label ? "mr-1" : ""} />}
								{action.label}
							</PopConfirmButton>
						)}
						{props.divider && index < getActions.length - 1 && <Divider type="vertical" className="action-divider" />}
					</Fragment>
				);
			})}
			{props.dropDownActions && getDropdownList.length > 0 && (
				<Dropdown trigger={["hover"]} dropMenuList={getDropdownList} popconfirm={true}>
					<Button type="link">
						{t("component.table.more")} <Icon className="icon-more" icon="ant-design:down-outlined" />
					</Button>
				</Dropdown>
			)}
		</div>
	);
};

export default TableAction;
